<div id="floor-plans-manage-view">
  <!--<div class="pageheader">-->
    <!--<h2><i class="fa fa-home"></i>楼层维护</h2>-->
  <!--</div>-->
  <div class="page">
    <div class="al-list-container">
      <ng-form class="form-horizontal al-search-container" role="form">
        <div class="form-group">
          <label class="col-sm-2 col-sm-offset-2 control-label">项目</label>
          <div class="col-sm-3">
            <select ng-options="option.id as option.name for option in projectList"
                    ng-model="data.project" class="form-control"></select>
          </div>
        </div>
        <div class="form-group" ng-if="data.project">
          <label class="col-sm-2 col-sm-offset-2 control-label">楼栋</label>
          <div class="col-sm-3">
            <select ng-options="option.id as option.name for option in unitList"
                    ng-model="data.unit" class="form-control"></select>
          </div>
        </div>
        <div class="form-group" ng-if="data.unit!=undefined">
          <label class="col-sm-2 col-sm-offset-2 control-label">楼层</label>
          <div class="col-sm-3">
            <select ng-options="option.id as option.name for option in unitFlourList"
                    ng-model="data.floor" class="form-control"></select>
          </div>
        </div>
        <div class="form-group" ng-if="data.floor!=undefined">
          <div class="col-sm-3 col-sm-offset-5">
            <button class="btn btn-primary" ng-click="doMaintain()">维护</button>
          </div>
        </div>
      </ng-form>
    </div>
    <div class="floor-maintain" ng-if="floorInfo">
      <h3>{{floorInfo.name}}&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;平面示意图</h3>
      <div class="floor-maintain-form form-horizontal">
        <div class="form-group">
          <label class="control-label col-sm-2">选择房间</label>
          <div class="col-sm-2">
            <select ng-options="option.id as option.name for option in floorInfo.roomList"
                    ng-model="floorInfo.currentRoom" class="form-control"
                    data-ng-change="pickRoom(floorInfo.currentRoom)">
            </select>
          </div>
          <label class="control-label col-sm-2 col-sm-offset-2">房间数</label>
          <div class="col-sm-2" style="height: 33px;overflow: hidden">
            <div class="form-control" ng-if="!floorInfo.editingRoomNum"
                 style="background-color: #eee;">{{floorInfo.roomNum}}</div>
            <input class="form-control" ng-if="floorInfo.editingRoomNum"
                   type="text" ng-model="info.newRoomNum">
          </div>
          <div class="col-sm-2">
            <button class="btn btn-primary" ng-if="!floorInfo.editingRoomNum" ng-click="editRoomNum()">修改</button>
            <button class="btn btn-primary" ng-if="floorInfo.editingRoomNum" data-ng-disabled="checkNewRoomNum()"
                    ng-click="saveRoomNum()">保存</button>
            <button class="btn btn-warning" ng-if="floorInfo.editingRoomNum"
                    ng-click="floorInfo.editingRoomNum=false">取消</button>
          </div>

        </div>
        <div ng-if="roomInfo">
          <div class="form-group">
            <h4>
              {{roomInfo.name}}
              <button class="btn btn-success" ng-if="roomInfo.status==0" ng-click="roomInfo.status=1">激活</button>
              <button class="btn btn-danger" ng-confirm-click="确认要禁用本房间吗？"
                      ng-if="roomInfo.status!=0" ng-click="roomInfo.status=0">禁用</button>
            </h4>
          </div>
          <div class="form-group" ng-if="roomInfo.status!=0">
            <label class="control-label col-sm-2">名称</label>
            <div class="col-sm-2">
              <input type="text" class="form-control" ng-model="roomInfo.name" placeholder="房间名称">
            </div>
            <div class="control-label col-sm-2">状态</div>
            <div class="col-sm-2">
              <select ng-options="option.value as option.name for option in roomActiveStatusList"
                      ng-model="roomInfo.status" class="form-control"></select>
            </div>
          </div>
          <div class="form-group" ng-if="roomInfo.status!=0">
            <label class="control-label col-sm-2">体积</label>
            <div class="col-sm-2">
              <div class="input-group">
                <span class="input-group-addon">宽度</span>
                <input type="number" class="form-control" ng-model="roomInfo.width" maxlength="4">
              </div>
            </div>
            <div class="col-sm-2">
              <div class="input-group">
                <span class="input-group-addon">高度</span>
                <input type="number" class="form-control" ng-model="roomInfo.height" maxlength="4">
              </div>
            </div>
            <div class="control-label col-sm-2">位置</div>
            <div class="col-sm-2">
              <div class="input-group">
                <span class="input-group-addon">偏左</span>
                <input type="number" class="form-control" ng-model="roomInfo.left" maxlength="4">
              </div>
            </div>
            <div class="col-sm-2">
              <div class="input-group">
                <span class="input-group-addon">偏上</span>
                <input type="number" class="form-control" ng-model="roomInfo.top" maxlength="4">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="floor-plan-container" >
        <div class="dynamic-room" ng-style="roomStyle(item)"
             ng-class="{1:'rentable',2:'rented',3:'unavailable'}[item.status]"
             ng-repeat="item in floorInfo.roomList" ng-if="item.status!=0">
          <span class="room-name" ng-class="{'current':roomInfo.id==item.id}">{{item.name}}</span>
        </div>
        <img ng-src="{{floorInfo.planUrl}}">
      </div>
    </div>
  </div>
</div>
